<template>
	<view class="content">
		<swiper class="swiper" 
		:autoplay="autoplay"
		:current="current"
		@change="changeSwiper"
		:duration="duration">
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="https://oss.arapp.net/img/start_01.jpg" mode="aspectFit"></image></view>
					<!-- <view class="swiper-item-img"><image src="../../static/guide/icon_01.png" mode="aspectFit"></image></view> -->
				</view>
				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="https://oss.arapp.net/img/start_02.jpg" mode="aspectFit"></image></view>
					<!-- <view class="swiper-item-img"><image src="../../static/guide/icon_02.png" mode="aspectFit"></image></view> -->
				</view>
				<view class="jump-over" @tap="launchFlag()">{{jumpover}}</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item-img"><image src="https://oss.arapp.net/img/start_03.jpg" mode="aspectFit"></image></view>
					<!-- <view class="swiper-item-img"><image src="../../static/guide/icon_04.png" mode="aspectFit"></image></view> -->
				</view>
				<view class="experience" @tap="launchFlag()">{{experience}}</view>
			</swiper-item>
		</swiper>
		<view class="star-dot" v-show="current != 2">
			<view v-for="(item, index) in 3" :key="index" :style="{width: width,'border-radius': borderRadius,background: index === current ? backgroundColor : '', transition: transition}"></view>
		</view>
		<!-- <view class="uniapp-img"><image src="../../static/guide/uniapp4@2x.png" mode="aspectFit"></image></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				autoplay: false,
				duration: 500,
				jumpover: '跳过',
				experience: '进入APP',
				current: 0,
				width: '70rpx',
				borderRadius: '5rpx',
				backgroundColor: '#1e6ed8',
				transition: 'all 0.3s ease-in-out'
			}
		},
		methods: {
			launchFlag(){
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				uni.setStorage({
						key: 'launchFlag',
						data: true,
						success: () => {
							uni.switchTab({
								url: '/pages/index/index2'
							})
						}
				})
			},
			changeSwiper(e) {
				this.current = e.detail.current
			}
		}
	}
</script>
<style>
	page,
	.content{
		width: 100%;
		height: 100%;
		background-size: 100% auto ;
		padding: 0;
	}
	.swiper{
		width: 100%;
		/* height: 1040rpx; */
		height: 100%;
		background: #FFFFFF;
	}
	.swiper-item {
		width: 100%;
		height: 80%;
		text-align: center;
		position: relative;
		display: flex;
		/* justify-content: center; */
		align-items:flex-end;
		flex-direction:column-reverse
	}
	.swiper-item-img{
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
	.swiper-item-img image{
		width: 100%;
		height: 880rpx;
	}
	.uniapp-img{
		height: 20%;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items:center;
		overflow: hidden;
	}
	.uniapp-img image{
		width: 40%;
	}
	.experience{
		position: absolute;
		z-index: 999;
		width: 300rpx;
		height: 90rpx;
		background-color: #ecedf5;
		border-radius: 45rpx;
		line-height: 90rpx;
		text-align: center;
		color: #596579;
		font-size: 34rpx;
	}
	.jump-over{
		position: absolute;
		right: 78rpx;
		bottom: 116rpx;
		color: #b9bdc5;
		font-size: 30rpx;
	}
	.experience{
		right: 50%;
		margin-right: -150rpx;
		bottom: 10%;
	}
	.star-dot {
		width: 208rpx;
		height: 10rpx;
		background-color: #f1f6ff;
		border-radius: 5rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		transform: translate(-50%, -200rpx);
		display: flex;
		.dot {
			width: 70rpx;
			height: 10rpx;
		}
		.active {
			background-color: #1e6ed8;
			border-radius: 5rpx;
			height: 10rpx;
		}
	}
</style>
